/*
 * author: downey
 * version: 1.0.0
 * git: http://git.kekuming.xin/downey/downey-canvas-charts.git
 */
import Base from './base'

export default class Pie extends Base {

  constructor(option = {}) {
    const parameter = {
      data: [500, 150, 150],
      showRate: true,
      startAngle: -90,
      radius: 80,
      radiusWidth: 20,
      textColor: 'rgba(254, 252, 242, 1)',
      rateColor: 'rgba(254, 252, 242, 1)',
      dataStyle: [
        {
          text: '男性',
          textColor: 'rgba(254, 252, 242, 1)',
          fillColor: [],
          rateColor: '',
          radius: 90,
          fontSize: 16
        },
        {
          text: '女性',
          textColor: 'rgba(254, 252, 242, 1)',
          fillColor: [],
        },
        {
          text: '外星人',
          textColor: 'rgba(254, 252, 242, 1)',
          fillColor: 'rgba(157, 200, 210, 1)',
        }
      ],
      indicatorStyle: {
        radius: 3,
        fillColor: 'rgba(127, 251, 243, .8)',
        lineColor: 'rgba(127, 251, 243, .3)',
        lineWidth: 1,
        shortLine: 20,
        longLine: 100,
      }
    };
    super(option, parameter);
  }

  // 重写计算保存全局变量
  getGlobal() {
    this.sumData = this.getSum();
    this.avgAngle = 360 / this.sumData;
  }

  // TEST
  test() {
    // 空心圆

    this.ctx.beginPath();
    this.ctx.strokeStyle = 'red';
    this.ctx.lineWidth = 20;
    this.ctx.lineCap = 'round';

    this.ctx.arc(350, 150, 50, 0, Math.PI / 180 * 90);
    this.ctx.stroke();
    this.ctx.closePath();

    this.ctx.beginPath();
    this.ctx.strokeStyle = '#ccc';
    this.ctx.lineWidth = 20;
    this.ctx.lineCap = 'round';

    this.ctx.arc(350, 150, 50, Math.PI / 180 * 90, Math.PI / 180 * 180);
    this.ctx.stroke();
    this.ctx.closePath();

    this.ctx.beginPath();
    this.ctx.strokeStyle = '#000';
    this.ctx.lineWidth = 20;
    this.ctx.lineCap = 'round';
    this.ctx.arc(350, 150, 50, Math.PI / 180 * 180, Math.PI / 180 * 360);

    this.ctx.stroke();
    this.ctx.closePath();

  }

  // 重写绘制逻辑
  drawLogic() {
    let t = this.startAngle;

    this.data.forEach((v, k) => {
      let {text, textColor, fillColor, rateColor, radius, fontSize, radiusWidth} = {...this, ...this.dataStyle[k]} || {};
      // TODO rateColor颜色
      text = text || '';
      let rate = Number(v / this.sumData * 100).toFixed(2);
      if (!this.dataStyle[k]) this.dataStyle[k] = {};
      this.dataStyle[k].rate = rate;
      if (this.showRate) text += rate + '%';

      // 360 / 180 * 120
      let s = t;
      let e = t + v * this.avgAngle;

      // TODO 自定义渐变模式
      const gd = (this.type === 'hollow' ? [0, 0, 0, radius] : [0, 0, 0, 0, 0, radius]);
      let color = this.getColor(fillColor, gd);

      this.drawArc(0, 0, radius, Math.PI / 180 * s, Math.PI / 180 * e, color, radiusWidth);

      let textX = Math.ceil(Math.cos(Math.PI / 180 * (t + v * this.avgAngle * .5)) * (radius + 10));
      let textY = Math.ceil(Math.sin(Math.PI / 180 * (t + v * this.avgAngle * .5)) * (radius + 10));

      this.ctx.beginPath();
      this.ctx.fillStyle = this.getColor(this.indicatorStyle.fillColor);
      this.ctx.arc(textX, textY, this.indicatorStyle.radius, 0, Math.PI * 2);
      this.ctx.fill();
      this.ctx.closePath();

      let quadrant = this.getQuadrant(textX, textY);
      this.dataStyle[k].quadrant = quadrant;

      let shortLine = this.indicatorStyle.shortLine || 20, longLine = this.indicatorStyle.longLine || 100;

      this.ctx.beginPath();
      this.ctx.lineWidth = this.indicatorStyle.lineWidth || 1;
      this.ctx.strokeStyle = this.getColor(this.indicatorStyle.lineColor);
      this.setFont(textColor, 'center', fontSize);
      this.ctx.moveTo(textX, textY);
      // 处理重叠偏移
      let [px, py] = this.extend([0, 0], this.dataStyle[k]);
      // if (this.data.length > 1 && k === this.data.length - 1 && v < .5) this.dataStyle[k].quadrant = quadrant = 4;
      if (k > 0 && this.dataStyle[k].rate <= 30 && this.dataStyle[k - 1].rate <= 30 && this.dataStyle[k].quadrant === this.dataStyle[k - 1].quadrant) {
        if (quadrant === 1) {
          px = this.dataStyle[k].px = this.dataStyle[k - 1].px + 8;
        } else if (quadrant === 2) {
          px = this.dataStyle[k].px = this.dataStyle[k - 1].px - 8;
        } else if (quadrant === 3) {
          px = this.dataStyle[k].px = this.dataStyle[k - 1].px - 8;
        } else if (quadrant === 4) {
          px = this.dataStyle[k].px = this.dataStyle[k - 1].px + 8;
        }
        py = this.dataStyle[k].py = this.dataStyle[k - 1].py + fontSize;
      } else {
        this.dataStyle[k].px = px;
        this.dataStyle[k].py = py;
      }
      switch (quadrant) {
        case 1:
          this.ctx.textAlign = 'left';
          this.ctx.lineTo(textX + shortLine + px, textY - shortLine + py);
          this.ctx.lineTo(textX + longLine + px, textY - shortLine + py);
          this.ctx.fillText(text, textX + shortLine + 10 + px, textY - shortLine - 5 + py);
          break;
        case 2:
          this.ctx.textAlign = 'left';
          this.ctx.lineTo(textX + shortLine + px, textY + shortLine + py);
          this.ctx.lineTo(textX + longLine + px, textY + shortLine + py);
          this.ctx.fillText(text, textX + shortLine + 10 + px, textY + shortLine + 14 + 5 + py);
          break;
        case 3:
          this.ctx.textAlign = 'right';
          this.ctx.lineTo(textX - shortLine + px, textY + shortLine - py);
          this.ctx.lineTo(textX - longLine + px, textY + shortLine - py);
          this.ctx.fillText(text, textX - shortLine - 10 + px, textY + shortLine + 14 + 5 - py);
          break;
        case 4:
          this.ctx.textAlign = 'right';
          this.ctx.lineTo(textX - shortLine + px, textY - shortLine - py);
          this.ctx.lineTo(textX - longLine + px, textY - shortLine - py);
          this.ctx.fillText(text, textX - shortLine - 10 + px, textY - shortLine - 5 - py);
          break;
      }

      this.ctx.stroke();
      this.ctx.closePath();
      // console.log(v, v * this.avgAngle, color, t, s, e);
      t = e;
    });

    this.ctx.restore();

  }

  // 画圆
  drawArc(x = 0, y = 0, r = 50, s = 0, e = 360, color = [], radiusWidth = 20) {
    if (this.type === 'hollow') {
      // 空心圆
      this.ctx.beginPath();
      this.ctx.strokeStyle = color;
      this.ctx.lineWidth = radiusWidth;
      this.ctx.lineCap = 'round';

      this.ctx.arc(x, y, r - radiusWidth / 2, s, e);
      this.ctx.stroke();
      this.ctx.closePath();
    } else {
      // 实心圆
      this.ctx.beginPath();
      this.ctx.fillStyle = color;
      this.ctx.shadowColor = 'rgba(16, 28, 38, .5)';
      this.ctx.shadowBlur = 10;

      this.ctx.moveTo(x, y);
      this.ctx.arc(x, y, r, s, e);

      this.ctx.fill();
      this.ctx.closePath();
    }

  }

  // TODO hover数据

}
